import { h, onMounted, onUnmounted, ref } from 'vue';
import icn_loading from './icn_loading.png';

const Container = {
  name: 'Loading',
  props: {
    size: Number,
  },
  setup() {
    let animationFrame = null;
    const deg = ref(0);
    const animate = () => {
      deg.value = deg.value >= 360 ? 6 : deg.value + 6;
      animationFrame = window.requestAnimationFrame(animate);
    };
    onMounted(() => {
      animate();
    });
    onUnmounted(() => {
      window.cancelAnimationFrame(animationFrame);
      animationFrame = null;
    });
    return { deg };
  },
  render() {
    const size = Number.isFinite(this.size) ? this.size : 36;
    return h('div', { style: { width: '100%', height: '100%' } }, [
      h('div', { style: { width: '100%', height: '100%', position: 'relative' } }, [
        h('img', {
          src: icn_loading,
          alt: 'loading',
          style: {
            position: 'absolute',
            top: '50%',
            left: '50%',
            width: size + 'px',
            height: size + 'px',
            margin: (-1 * size) / 2 + 'px' + ' 0 0 ' + (-1 * size) / 2 + 'px',
            transition: 'transform liner 0.5s',
            transform: 'rotate(' + this.deg + 'deg)',
          },
        }),
      ]),
    ]);
  },
};

export default Container;
